<template>
  <div class="life-box" :style="{width: total + 'px'}" :class="boxStyle" v-show="point >= 0">
    <span v-show="restLife > 1" class="life-count">x {{restLife}}</span>
    <div class="life-point" :style="{width: point % 800 + 'px'}" :class="lifeStyle"></div>
  </div>
</template>

<script>
  export default {
    name: "index",
    props: {
      point: {
        type: Number,
        default: 900
      }
    },
    data() {
      return {
        total: 0
      }
    },
    computed: {
      restLife() {
        return Math.ceil(this.point/ 800)
      },
      lifeStyle() {
        let rest = Math.floor(Math.floor(this.point / 800) % 5)
        switch (rest) {
          case 0:
            return 'rest-one'
          case 1:
            return 'rest-two'
          case 2:
            return 'rest-three'
          case 3:
            return 'rest-four'
          case 4:
            return 'rest-five'
          default:
            return 'rest-none'
        }
      },
      boxStyle() {
        let rest = Math.floor(Math.floor(this.point / 800) % 5)
        switch (rest) {
          case 0:
            if (this.point < 800) return 'rest-none'
            else return 'rest-five'
          case 1:
            return 'rest-one'
          case 2:
            return 'rest-two'
          case 3:
            return 'rest-three'
          case 4:
            return 'rest-four'
          case 5:
            return 'rest-five'
          default:
            return 'rest-none'
        }
      }
    },
    created() {
      this.total = this.point
    }
  }
</script>

<style scoped>
  .life-box {
    max-width: 800px !important;
    height: 26px;
    border: 1px solid #dddddd;
    margin: 20px 30px;
    position: relative;
  }

  .life-point {
    background-color: #ff6700;
    height: 100%;
    transition: ease-out 0.5s;
  }

  .rest-none {
    background-color: rgb(0, 0, 0);
  }

  .rest-one {
    background-color: #ff4949;
  }

  .rest-two {
    background-color: #ffba00;
  }

  .rest-three {
    background-color: #409eff;
  }

  .rest-four {
    background-color: #0FF79B;
  }

  .rest-five {
    background-color: #BF17BA;
  }

  .life-count {
    display: inline-block;
    position: absolute;
    right: 0;
    top: -20px;
  }
</style>
